<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2// EN">
<head>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CSPS Creative Design Brief</title>
<link type="text/css" href="../../../../css/default.css" rel="StyleSheet">
<script src="../../../../scripts/contentpage.js" type="text/javascript" language="JavaScript"></script><script type="text/javascript" language="JavaScript">
					backPath = './../../';
				</script>
</head>


<body><!--msnavigation--><table border="0" cellpadding="0" cellspacing="0" width="100%"><tr><!--msnavigation--><td valign="top">
<p><b><font  size="5">&nbsp;</font></b></p><b><font  size="5">
<p align="RIGHT">Collegiate Sports Paging Service<a name="Top"></a></p>
<p align="RIGHT">Creative Design Brief</p>
</font><p align="RIGHT"><font  size="5"></font><font  size="4">&nbsp;</font></p><font  size="4">
<p align="RIGHT">Version 1.0</p></font></b>
<p><font  size="5"><b>&nbsp;</b></font></p><font  size="5"><b>
<p align="CENTER">Revision History</p></b></font>

<table border="1" cellspacing="1" cellpadding="7" width="633">
  <tr>
    <th width="24%" valign="TOP" scope="col"><b>
      <p align="CENTER">Date    
    </b></th>
    <th width="12%" valign="TOP" scope="col"><b>
      <p align="CENTER">Version    
    </b></th>
    <th width="39%" valign="TOP" scope="col"><b>
      <p align="CENTER">Description    
    </b></th>
    <th width="24%" valign="TOP" scope="col"><b>
      <p align="CENTER">Author    
    </b></th>
  </tr>
  <tr>
    <td width="24%" valign="TOP">October 6, 1999</td>
    <td width="12%" valign="TOP">1.0</td>
    <td width="39%" valign="TOP">Initial version</td>
    <td width="24%" valign="TOP">Context Integration</td>
  </tr>
</table>
<h5>Table of Contents</h5>
<ul>
  <li><a href="#Introduction">Introduction</a></li>
  <li><a href="#Overview">Overview</a></li>
  <li><a href="#Visually Supporting the Function of the Site (the mood)">Visually
    Supporting the Function of the Site (the mood)</a></li>
  <li><a href="#Determining the Color Scheme">Determining the Color Scheme</a></li>
  <li><a href="#Fonts and Scrolling">Fonts and Scrolling</a></li>
  <li><a href="#Site Navigation and Page Layout">Site Navigation and Page Layout</a></li>
  <li><a href="#Graphics Standards">Graphics Standards</a></li>
  <li><a href="#Browsers, Frames, and Other Standards">Browsers, Frames, and
    Other Standards</a></li>
  <li><a href="#Personalization Elements">Personalization Elements</a></li>
  <li><a href="#Conclusion">Conclusion</a></li>
</ul>
<p align="CENTER">Creative Design Brief</p>
<h3><a name="Introduction"></a>Introduction <a href="#Top"><img src="../../../../core.base_rup/resources/top.gif" alt="Top of page" border="0" width="26" height="20"></a></h3>
<h4>Purpose</h4>
<p>This document presents standards to be used during the design of the User
Interface (UI) for the Collegiate Sports Paging System.</p>
<h4>Scope</h4>
<p>This document encompasses all UI elements that are used in the web site.</p>
<h4>Definitions, Acronyms and Abbreviations</h4>
<p>See <a href="ex_gloss1.htm">Glossary</a>.</p>
<h4>References</h4>
<ol>
  <li><a href="ex_vision.htm">CSPS Vision Document 1.0</a></li>
</ol>
<h3><a name="Overview"></a>Overview <a href="#Top"><img src="../../../../core.base_rup/resources/top.gif" alt="Top of page" border="0" width="26" height="20"></a></h3>
<p>The visual elements of the Sports Paging Service web site will fit in line
with WebNewsOnLine's current web presence. This site will add the
personalization and customization required by the paging service. In general, it
will maintain the look and feel of WebNewsOnLine's current site. Some of the
additions required by this service are a login screen, user profile editing,
customized link list, and maintaining a history of past pages.</p>
<h3><a name="Visually Supporting the Function of the Site (the mood)"></a>Visually
Supporting the Function of the Site (the mood) <a href="#Top"><img src="../../../../core.base_rup/resources/top.gif" alt="Top of page" border="0" width="26" height="20"></a></h3>
<p>The mood of this site will follow the lead of the current news site. The
focus of the paging service is sports news and scores, so the mode will model an
online news web site. The priority is content over a flashy visual design. An
overall conservative look will consist of a white background, black serif text,
columns with news articles and photos, and tables with user profile information
and a linked list of the paging history.</p>
<h3><a name="Determining the Color Scheme"></a>Determining the Color Scheme <a href="#Top"><img src="../../../../core.base_rup/resources/top.gif" alt="Top of page" border="0" width="26" height="20"></a></h3>
<p>A color should add to the message conveyed by the web site. A professional
and conservative site should use cool and neutral colors. Bright or warm colors
can be used as accents. The paging site will use the same color palette enforced
in the main web site.</p>
<p align="center"><img src="images/ex_clrplt.gif" alt="Image Label Below" width="424" height="120"></p>
<p class="picturetext">Figure 1 - Web site color palette</p>
<p>Colors will also be used to highlight important items on the paging
subscriber's homepage. Links will remain the standard blue color used
throughout the site. All body text will be black, while table headings will be
white on various background colors.</p>
<h3><a name="Fonts and Scrolling"></a>Fonts and Scrolling <a href="#Top"><img src="../../../../core.base_rup/resources/top.gif" alt="Top of page" border="0" width="26" height="20"></a></h3>
<p>The paging service web site's fonts and scrolling behavior will mimic the
WebNewsOnLine web site. Serif fonts are used for most of the text for
readability. The width of the page is limited to fit inside a 640x480 screen
without scrolling horizontally. The user scrolls up and down to view content.
News articles generally are on one screen taking vertical space as needed.</p>
<h3><a name="Site Navigation and Page Layout"></a>Site Navigation and Page
Layout <a href="#Top"><img src="../../../../core.base_rup/resources/top.gif" alt="Top of page" border="0" width="26" height="20"></a></h3>
<p>The width of the page is limited to 600 pixels with about 20% of the
horizontal space allocated for the sidebar on the left. The body area is given
the remaining 80%. The banner section includes the logo, banner advertisements,
and links to the main sections of the news web site.</p>
<p align="center"><img src="images/ex_pglyout.gif" alt="Image Label Below" width="400" height="350"></p>
<p class="picturetext">Figure 2 - Page Layout Standard</p>
<p>The sidebar contains the sub-links for the paging service web site. These
links will allow the user to go back to their home page and traverse recent
articles and scores postings. The footer of the body section will include more
banner advertisements.</p>
<h3><a name="Graphics Standards"></a>Graphics Standards <a href="#Top"><img src="../../../../core.base_rup/resources/top.gif" alt="Top of page" border="0" width="26" height="20"></a></h3>
<p>Visitors to the paging site will be connecting at speeds from T1 lines down
to 28.8 modems. The site is designed to load fast, using a minimum of photos and
other graphic images. Outside of the main logo, page header and advertisements,
only a few other graphic images are used on each page. There may be only one or
two photos corresponding to a news article.</p>
<p>This site will not use any JavaScript rollovers or animation (outside of any
animation included in the banner advertisements). This will ensure that download
speeds are fast and that the web site is compatible with new and older browsers.</p>
<h3><a name="Browsers, Frames, and Other Standards"></a>Browsers, Frames, and
Other Standards <a href="#Top"><img src="../../../../core.base_rup/resources/top.gif" alt="Top of page" border="0" width="26" height="20"></a></h3>
<p>Visitors to the site will be using Netscape Navigator, Internet Explorer, and
other popular web browsers. Browser versions will vary, but most will be using
3.0 versions or higher. The HTML code and layout techniques used on the site
will support most browser brands that support HTML 3.0 or higher.</p>
<p>Frames will not be used on the sports paging web site. The entire screen is
loaded from scratch when a new link is chosen. This behavior matches the web
site.</p>
<p>A web-safe color palette has been chosen to ensure that the site looks the
same on various platforms, browsers, and screen color configurations.</p>
<h3><a name="Personalization Elements"></a>Personalization Elements <a href="#Top"><img src="../../../../core.base_rup/resources/top.gif" alt="Top of page" border="0" width="26" height="20"></a></h3>
<p>The top section of the subscriber's page consists of a welcome phrase
including their name. This ensures to the user they have properly logged in and
the information on the screen is customized for them.</p>
<p>The second element is a header indicating the date and time of the last page.
This is an indicator that the content on the home screen relates to the page
received at that date and time.</p>
<p>The two primary elements of the paging service are news articles and game
scores. These two are grouped in tables on the user's home page. These tables
include headlines and scores reports with links to the full news story and game
report.</p>
<p>At the bottom of their homepage, the subscriber will find a table of links to
recent pages to access historical page information. If this list grows large, a
link will be added to &quot;view all pages&quot; which will send them to another
page with the complete list of page links.</p>
<h3><a name="Conclusion"></a>Conclusion <a href="#Top"><img src="../../../../core.base_rup/resources/top.gif" alt="Top of page" border="0" width="26" height="20"></a></h3>
<p>The visual design for the sports paging service will be the same as the web
site. The look and feel can be characterized as a news and content focused site
that is geared toward being readable, easy to navigate, with fast downloading.
Visitors will be connecting speeds varying from very fast T1 lines to slower
modems, so graphics are kept to a minimum. The HTML used is compatible with all
of the popular browsers down to their 3.0 versions.</p>
<p>The subscriber's home page will consist of personalized elements or units
on the screen. These elements contain a welcome message, the news headlines and
game score links, and last pages links. Banner ads on these screens can also be
customized for subscriber preferences.</p>
<p>&nbsp;<br>
<br>
<p><font><small><small>Copyright&nbsp;
 1987 - 2003 Rational Software Corporation</small></small></font>
<!--msnavigation--></td><td valign="top" width="24"></td><td valign="top" width="1%">



</td></tr><!--msnavigation--></table>
<!--msnavigation--><table border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td>



</td></tr><!--msnavigation--></table></body>

</html>
